import { Button, Layout, List, Modal ,Table} from "antd";
import React from "react";
import * as Icon from '@ant-design/icons';
const { Sider, Content } = Layout;
export default class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            menuList: [
                {
                    id: 1,
                    title: "姓名",
                    icon: "UserOutlined"
                },
                {
                    id: 2,
                    title: "手机号",
                    icon: "TabletOutlined"
                },
                {
                    id: 3,
                    title: "日期",
                    icon: "ScheduleOutlined"
                }
            ],
            isModalVisible: false,
            tableData: [],
            pageList: [
                {
                    id: "page1",
                    color: "yellow"
                },
                {
                    id: "page2",
                    color: "red"
                },
                {
                    id: "page3",
                    color: "green"
                },
                {
                    id: "page4",
                    color: "pink"
                },
                {
                    id: "page5",
                    color: "purple"
                },
            ],
            columns:[
                {
                    dataIndex:"tagId",
                    title:"标记",
                    with:100
                },
                {
                    dataIndex:"isIn",
                    title:"是否在页面中",
                    with:240,
                    render:(value)=>value?"是":"否"
                },
                {
                    dataIndex:"currentPage",
                    title:"所在页面",
                    with:100
                },
                {
                    dataIndex:"left",
                    title:"距离页面左侧",
                    with:240
                },
                {
                    dataIndex:"top",
                    title:"距离页面顶部",
                    with:240
                },
            ]
        }

    }
    generateIcon(type) {
        return <>{React.createElement(Icon[type])}</>
    }

    addTag(e) {
        const editer = document.getElementById("editer")
        const content = document.getElementById("editer")
        window.moveFlag = true
    }
    endTag(e) {
        window.moveFlag = false
        this.isInBox('content', true)
        window.currentId = null
    }
    isInPage(tagId) {
        let backupId = window.currentId
        let idList = this.state.pageList.map(item => item.id)
        let isIn = false;
        let currentPage = "";
        let left = 0
        let top = 0
        idList.forEach(item => {
            if (tagId) window.currentId = tagId
            let flag = this.isInBox(item)
            if (backupId !== window.currentId) window.currentId = backupId
            if (flag) {
                let tag = document.getElementById(tagId)
                let page = document.getElementById(item)
                left = tag.offsetLeft - page.offsetLeft - tag.offsetWidth / 2
                top = tag.offsetTop - page.offsetTop - tag.offsetHeight / 2
                isIn = flag
                currentPage = item
            }
        })
        return { isIn,tagId, currentPage, left, top }
    }
    isInBox(contentId, isRemove = false) {
        const current = document.getElementById(window.currentId)
        if (!current) return
        const content = document.getElementById(contentId)
        let isInContent = this.boxIsInContent(content.offsetLeft, content.offsetTop, content.offsetWidth, content.offsetHeight, current.offsetLeft, current.offsetTop,)
        if (!isInContent && isRemove) {
            const editer = document.getElementById("editer")
            editer.removeChild(current)
            for (let key in window.editData) {
                window.editData[key] = window.editData[key].filter(item => item !== window.currentId)
            }
        }
        return isInContent
    }
    boxIsInContent(cl, ct, cw, ch, bl, bt) {
        let bw = 150, bh = 60;
        let isLeft = bl > cl + (bw / 2)
        let isTop = bt > ct + (bh / 2)
        let isBottom = ct + ch > bt + bh - (bh / 2)
        let isRight = cl + cw > bl + bw - (bw / 2)
        return isLeft && isTop && isBottom && isRight
    }
    moveTag(e) {
        if (!window.currentId) return;
        const top = e.pageY
        const left = e.pageX
        const test = document.getElementById(window.currentId)
        if (test && window.moveFlag) {
            test.setAttribute('style', `left:${left}px;top:${top}px`);
        }
    }
    createDiv(e, title, id) {
        const editer = document.getElementById("editer")
        let top = e.pageY
        let left = e.pageX
        const child = document.createElement("div")
        child.className = "son"
        child.setAttribute('style', `left:${left}px;top:${top}px;position:relative`);
        child.setAttribute('id', id);
        child.innerText = title
        child.addEventListener("mousedown", (e) => {
            window.currentId = e.target.id
        })
        editer.appendChild(child)
    }
    generateData(e, type) {
        if (!window.editData) {
            window.editData = {
                nameList: [],
                phoneList: [],
                dataList: []
            }
        }
        let na = "", str = "";
        switch (type) {
            case 1:
                na = window.editData.nameList
                str = 'name' + na.length
                na.push(str)
                this.createDiv(e, '姓名' + na.length, str)
                break
            case 2:
                na = window.editData.phoneList
                str = 'phone' + na.length
                na.push(str)
                this.createDiv(e, '手机号' + na.length, str)
                break
            case 3:
                na = window.editData.dataList
                str = 'date' + na.length
                na.push(str)
                this.createDiv(e, '日期' + na.length, str)
                break
        }
        window.currentId = str
    }
    getPosition() {
        let taglist = []
        for (let key in window.editData) {
            taglist = taglist.concat(window.editData[key])
        }
        taglist = taglist.map(item => this.isInPage(item))
        this.setState({ isModalVisible: true, tableData: taglist });
    }
    render() {
        return <Layout id="editer" className="window-height noselect conent-box" onMouseDown={this.addTag} onMouseMove={e => this.moveTag(e)} onMouseUp={e => this.endTag(e)}>
            <Sider theme="light" className="p-2">
                <List className="window-height fiexd">
                    {this.state.menuList.map(item => (<List.Item key={item.id}>
                        <div className="d-flex align-items-center pl-2  full-width full-height" onMouseDown={e => { this.generateData(e, item.id) }} data-id={item.id}>{this.generateIcon(item.icon)} <span className="pl-2">{item.title}</span></div>
                    </List.Item>))}
                    <List.Item>
                        <Button type="primary" onClick={() => { this.getPosition() }}>获取位置信息 </Button>
                        <Modal width={960} title="位置信息" visible={this.state.isModalVisible} onOk={() => { this.setState({ isModalVisible: false, tableData: [] }) }} onCancel={() => { this.setState({ isModalVisible: false, tableData: [] }) }}>
                            <Table style={{width:"960px"}} columns={this.state.columns} dataSource={this.state.tableData}></Table>
                        </Modal>
                    </List.Item>
                </List>
            </Sider>
            <Layout className="full-height">
                <Content style={{ flexDirection: "column", alignItems: "center", }} className=" d-flex p-2 full-height full-width">
                    <div id="content" style={{ width: 630, }}>
                        {this.state.pageList.map(item => (
                            <div className="full-width" id={item.id} key={item.id} style={{ height: 891, marginBottom: 5, background: item.color }}></div>
                        ))}
                    </div>
                </Content>
            </Layout>
        </Layout>
    }
}